<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办事项</title>
    <link href="https://cdn.bootcss.com/font-awesome/5.10.0-11/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="warpper clearfix">
    <!--左边目录-->
    <aside>
        <div class="aside_top">
            <div class="list"><i class="fas fa-bars"></i></div>
            <div class="search"><input type="search"></div>
            <div class="search_btn"><a href=""><i class="fas fa-search"></i></a></div>
        </div>
        <div class="aside_main">
            <div class="user_letter">
                <a href="#" class="user">
                    <span class="user_tu"><img src="img/user.jpg" alt=""></span>
                    <span class="user_name">石晓晶</span>
                </a>
                <a href="" class="letter">
                    <span class="user_actives"><img src="img/bell.png" alt="" title="活动" ></span>
                    <span class="user_mail"><img src="img/mail.png" alt="" title="对话"></span>
                </a>
            </div>
            <div class="list">
                <ul>
                    <li class="active"><i class="fas fa-envelope-open-text"></i><span>收件箱</span></li>
                    <li><i class="fas fa-list"></i><span>想看的电影</span></li>
                    <li><i class="fas fa-list"></i><span>想吃的东西</span></li>
                    <li><i class="fas fa-list"></i><span>想去哪旅行</span></li>
                </ul>
            </div>
            <div class="bot">
                <a href=""><i class="fas fa-plus"></i>创建清单</a>
            </div>
        </div>
    </aside>
    <!--右边文章-->
    <article>
        <div class="article_top">
            <div class="title">
                <h2 class="active">收件箱</h2>
                <h2>想看的电影</h2>
                <h2>想吃的东西</h2>
                <h2>想去哪旅行</h2>
            </div>
            <div class="more">
                <a href=""><i class="fas fa-user-plus"></i><span>共享</span></a>
                <a href=""><i class="fas fa-sort-alpha-up"></i><span>排序</span></a>
                <a href=""><i>•••</i><span>共享</span></a>
            </div>
        </div>
        <div class="article_cont">
            <i class="fas fa-plus" id="anniu"></i>
            <input type="text" id="ipt" placeholder="添加任务…">
        </div>
        <ul id="list"></ul>
        <div class="task">

        </div>
        <div class="completed">
            <text>显示已完成的任务</text>
            <div class="past">
            </div>
        </div>
    </article>
</div>


<script src="js/script.js"></script>
<!-- <script>
    var btn = document.querySelector('#anniu')
    var ipt = document.querySelector('#ipt')
    var list = document.querySelector('#list')
    btn.addEventListener('click',function(){
        // 创建span/p标签
        var det = document.createElement('span')
        var detwen = document.createElement('p')
        var dettext = document.createTextNode(ipt.value)
        detwen.appendChild(dettext)
        // 创建li标签
        var li = document.createElement('li')
        list.appendChild(li)
        li.appendChild(det)
        li.appendChild(detwen)
    })
    


    

</script> -->
</body>
</html>